<template>
  <div>
    <!-- 基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <div class="form-container">
        <el-form ref="firstForm" :model="firstForm" :rules="rules" label-width="150px" class="demo-ruleForm" size="small">
          <el-form-item label="产品名:" prop="name">
            <el-input v-model="firstForm.name" placeholder="请输入宝贝名"/>
          </el-form-item>
          <el-form-item label="副标题:" prop="pro_title">
            <el-input v-model="firstForm.pro_title" type="textarea" maxlength="60" show-word-limit placeholder="请输入副标题"/>
            <el-row style="color: #909399;font-size:12px">在标题下展示卖点信息，建议60字以内</el-row>
          </el-form-item>
          <el-form-item label="所属运营者:" prop="operator_list">
            <el-button size="small" type="primary" style="margin-bottom: 10px;" @click="addOperator">添加</el-button>
            <el-table
              v-if="firstForm.operator_list && firstForm.operator_list.length > 0"
              ref="operatorTable"
              :data="firstForm.operator_list"
              size="small"
              style="width: 100%;">
              <el-table-column label="客户编号" prop="user_id"/>
              <el-table-column label="手机号码" prop="phone" />
              <el-table-column label="姓名" prop="user_name"/>
              <el-table-column label="微信昵称" prop="nickname"/>
              <el-table-column label="操作" align="center" width="240">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="delOperator(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="关联三方银行：" prop="relation_bank_id">
            <el-select v-model="firstForm.relation_bank_id" filterable placeholder="请选择" @change="checkRelationBank">
              <el-option
                v-for="item in relationBankList"
                :key="item.bankCode"
                :label="item.name"
                :value="item.bankCode"/>
            </el-select>
          </el-form-item>
          <el-form-item label="关联三方信用卡：" prop="relation_credit_card_id">
            <el-select v-model="firstForm.relation_credit_card_id" filterable placeholder="请选择" @change="checkBankCard">
              <el-option
                v-for="item in relationBankcardList"
                :key="item.cardCode"
                :label="item.name"
                :value="item.cardCode"/>
            </el-select>
          </el-form-item>
          <el-form-item label="添加至热门银行：" prop="bank_id">
            <el-select v-model="firstForm.bank_id" filterable placeholder="请选择">
              <el-option
                v-for="item in bankList"
                :key="item.bank_id"
                :label="item.name"
                :value="item.bank_id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="是否收集身份证：" >
            <el-radio v-model="firstForm.is_add_id_card" label="1" >是</el-radio>
            <el-radio v-model="firstForm.is_add_id_card" label="0">否</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <operator-mode ref="operatorMode" :member_type="memberType" @callBackAddOperator="callBackAddOperator"/>
    </el-card>
  </div>
</template>

<script>

import operatorMode from './operatorMode'
import {
  relationBankList,
  relationBankCardList,
  getBankList
} from '@/api/mall/commodity'
export default {
  components: { operatorMode },
  mixins: [],
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      parameterList: [],
      supplierList: [],
      labelList: [], // 公司标签数据，数据源
      selectList: [], // 选中数据的集合
      commodityLabels: [], // 传递过来的商品的标签
      memberType: 3,
      firstForm: {
        name: '',
        is_add_id_card: '0',
        operator_list: [],
        bank_id: '',
        relation_bank_id: '',
        relation_credit_card_id: '',
        result: false
      },
      bankList: [],
      relationBankList: [],
      relationBankcardList: [],
      rules: {
        name: [
          { required: true, message: '请输入宝贝名', trigger: 'blur' }
        ],
        pro_title: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        bank_id: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        relation_bank_id: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        relation_credit_card_id: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    form(vlaue) {
      console.log('this.form', this.form)
      this.firstForm = this.form
      this.firstForm.is_add_id_card = '' + this.firstForm.is_add_id_card
      this.getRelationBankCard()
    },
    firstForm(vlaue) {
      console.log('value', vlaue)
    }
  },
  created() {
    // 获取第三方银行信息
    relationBankList().then(res => {
      this.relationBankList = res
    })
    // 获取热门银行信息
    getBankList().then(res => {
      if (res && res.length > 0) {
        this.bankList = res
      }
    })
  },
  methods: {
    addOperator() {
      // 添加运营者
      this.$refs.operatorMode.dialog = true
    },
    callBackAddOperator(data) {
      if (!data || data.length === 0) return
      // 遍历需要添加的数据，往现有数据中添加
      for (const item of data) {
        // 判断字，能否往现有数据中添加内容
        let isAdd = true
        // 遍历现有数据，和新增的数据做对比，若在现有数据已存在，则不做任何处理
        for (const info of this.firstForm.operator_list) {
          if (item.user_id === info.user_id) {
            isAdd = false
            break
          }
        }
        // 现有数据中是否存在当前内容，没有则添加，有不做任何处理
        if (isAdd) {
          this.firstForm.operator_list.push(item)
        }
      }
    },
    delOperator(row) {
      // 删除运营者
      const index = this.getIndex(row, this.firstForm.operator_list)
      this.firstForm.operator_list.splice(index, 1)
    },
    getIndex(info, list) {
      // 获取下标
      let num = 0
      // 获取当前list的位置
      list.map((item, i) => {
        if (item.user_id === info.user_id) {
          num = i
        }
      })
      return num
    },
    checkRelationBank() {
      this.firstForm.relation_credit_card_id = ''
      // this.relationBankcardList = []
      // 选择银行之后需要加载对应的信用卡信息系
      this.getRelationBankCard()
    },
    getRelationBankCard() {
      if (this.firstForm.relation_bank_id) {
        // 获取银行对应的信用卡
        relationBankCardList(this.firstForm.relation_bank_id).then(res => {
          this.relationBankcardList = res
        })
      }
    },
    checkBankCard() {
      // 选择相应的信用卡之后，信息回填
      for (const item of this.relationBankcardList) {
        if (item.cardCode === this.firstForm.relation_credit_card_id) {
          console.log(item)
        }
      }
    },
    change(e) {
      this.$forceUpdate()
    },
    renderingDom() {
    },
    // 给父组件传递收取表单的值
    sendFirstMsg() {
      this.$refs['firstForm'].validate((valid) => {
        if (valid) {
          this.firstForm.result = true
        }
        this.$emit('msgEvent', this.firstForm)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form-container {
  width: 90%;
}
.box-card {
  margin-bottom: 10px;
}
.el-card__body {
  padding: 20px 20px 0 20px!important;
}
.form-container-parameter {
  background: #f3f3f3;
  padding: 20px 20px 0 0;
}
</style>
